<template>
  <div id="my">
    <div class="my1">
      <div class="banner">
        <div class="banner1" @click="$router.push('/userinfo')">
          <img src="/images/老师点评-gray@2x.png" alt="">
        </div>
        <div class="banner2">
          <p>17638265803</p>
          <img src="/images/修改@2x.png" alt="">
        </div>
        <div class="banner3">
          去约课
        </div>

      </div>
      <div class="kecheng">
        <div>
          <p>1</p>
          <p>我的特色课</p>
          <p>已购特色课程的</p>
        </div>
        <div>
          <p>0</p>
          <p>一对一辅导</p>
          <p>我的一对一老师</p>
        </div>
        <div>
          <p>0.01</p>
          <p>剩余学习币</p>
          <p>查看剩余学习币</p>
        </div>
      </div>
    </div>
    <div class="asions">
      <div>
        <img src="/images/user_xuexika.png" alt="">
      </div>
      <div>
        邀请游戏好友注册app,享多重好礼
      </div>
      <div>
        >
      </div>
    </div>
    <h3>课程相关</h3>
    <div class="kecheng1">
      <div>
        <img src="/images/老师点评@2x.png" alt="">
        <p>关注的老师</p>
      </div>
      <div>
        <img src="/images/老师点评@2x.png" alt="">
        <p>我的收藏</p>
      </div>
    </div>
    <h3>订单相关</h3>
    <div class="kecheng1">
      <div>
        <img src="/images/资料-2@2x.png" alt="">
        <p>课程订单</p>
      </div>
      <div>
        <img src="/images/资料-2@2x.png" alt="">
        <p>会员订单</p>
      </div>
      <div>
        <img src="/images/资料-2@2x.png" alt="">
        <p>约课订单</p>
      </div>
    </div>
    <h3>订单相关</h3>
    <div class="kecheng1">
      <div>
        <img src="/images/user_youhuiquan.png" alt="">
        <p>优惠券</p>
      </div>
      <div>
        <img src="/images/user_xuexika.png" alt="">
        <p>学习卡</p>
      </div>
      <div>
        <img src="/images/user_huiyuan.png" alt="">
        <p>会员</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style  scoped>
#my {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 1rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.my1 {
  background: rgb(229, 134, 134);
}
.banner {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.banner1 {
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 0.026667rem solid #ccc;
}
.banner1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.banner2 {
  display: flex;
  align-items: center;
}
.banner2 img {
  width: 0.666667rem;
  height: 0.666667rem;
}
.banner3 {
  background: red;
  width: 1.333333rem;
  height: 0.5rem;
  color: white;
  text-align: center;
  line-height: 0.5rem;
}
.my1 {
  background: white;
}
.kecheng {
  width: 100%;
  height: 2rem;
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.kecheng div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 0.013333rem #ccc solid;
}
.asions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 1rem;
  border-radius: 0.8rem;
  color: white;
  margin-top: 0.5rem;
  background: linear-gradient(to right, rgb(228, 131, 75), red);
}
.kecheng1 {
  display: flex;
  text-align: center;
  background: rgb(241, 233, 233);
}
.kecheng1 div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 0.133333rem;
}
</style>